<template>
	<view class="pb-safe-area">
		<swiper class="screen-swiper square-dot" indicator-color="rgba(255,255,255,.45)"
			indicator-active-color="var(--xl-primary)" :indicator-dots="true" :autoplay="true">
			<swiper-item v-for="(url, index) in find.thumbs" :key="index">
				<image :src="url" mode="aspectFit" class="swiper-image"></image>
			</swiper-item>
		</swiper>
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="bg-white p-4 rounded-4 flex flex-column grid-gap-2">
				<view class="flex grid-gap-4">
					<text class="flex-1 h8 font-weight-600">{{ find.title }}</text>
					<view class="flex flex-center grid-gap-2" @tap="collect()">
						<image src="@/static/icons/collect_active.png" v-if="find.is_collect" mode="scaleToFill"
							style="width: 16px;height: 16px;" />
						<image v-else src="@/static/icons/collect.png" mode="scaleToFill"
							style="width: 16px;height: 16px;" />
						<text class="font-weight-600"
							:class="[find.is_collect ? 'text-danger-light-3' : 'text-placeholder']">{{ find.collect_num
							}}</text>
					</view>
				</view>
				<view class="flex flex-y-center flex-x-space-between">
					<view class="flex grid-gap-2">
						<view class="flex flex-center grid-gap-1 rounded-2 border border-primary pl-1 pr-2 py-1">
							<image src="/static/icons/people_num.png" mode="scaleToFill"
								style="width: 16px;height: 16px;" />
							<text class="text-primary h10">{{ WebConfigStore.replaceIndustryPersonnelName('旗下技师') }}{{
								find.people_num
							}}人</text>
						</view>
						<view
							class="flex flex-center grid-gap-1 rounded-2 border border-warning-light-3 pl-1 pr-2 py-1">
							<image src="/static/icons/comment_grade.png" mode="scaleToFill"
								style="width: 16px;height: 16px;" />
							<x-money :money="find.comment_grade" type="warning-light-3" unit-type="warning-light-3"
								size="10" unit=""></x-money>
						</view>
					</view>
				</view>
			</view>
			<view class="tab  flex flex-y-center">
				<view v-for="(item, index) in navList" :key="index" class="h9 font-weight-600 tab-item text-grey flex-1"
					@tap="changeNavTab(item.value)">
					<text :class="{ 'item-primary-active': navTbale === item.value }">{{
						WebConfigStore.replaceIndustryPersonnelName(item.label) }}</text>
				</view>
			</view>
			<view v-if="navTbale === 'technician'" class="flex flex-column grid-gap-4">
				<template v-if="technicianList.length > 0">
					<view class="bg-white rounded-4 p-4" v-for="(item, index) in technicianList" :key="index">
						<x-technician-item :item="item" />
					</view>
					<x-more :status="loadmore" @load="getTechnicianList"></x-more>
				</template>
				<view class="vh-30 flex flex-center" v-else>
					<x-empty type="order" :text="WebConfigStore.replaceIndustryPersonnelName('暂无服务技师')"></x-empty>
				</view>
			</view>

			<view v-else-if="navTbale === 'content'" class="bg-white p-4 rounded-4 flex flex-column grid-gap-4">
				<view class="flex flex-column grid-gap-2">
					<text class="h9 text-placeholder">门店位置</text>
					<view class="flex grid-gap-2 flex-center"
							@tap="openLocation">
						<image src="/static/icons/map-icon.png" mode="aspectFit" class="x-navbar-icons-image"
							style="width: 20px; height: 20px;" v-if="find.longitude && find.latitude" />
						<view class="flex-1">
							<text>{{ find.province }}</text>
							<text>{{ find.city }}</text>
							<text>{{ find.area }}</text>
							<text v-if="find.street">{{ find.street }}</text>
							<text>{{ find.address }}</text>
						</view>
					</view>
				</view>
				<view class="flex flex-column grid-gap-2">
					<text class="h9 text-placeholder">联系电话</text>
					<view class="flex flex-column grid-gap-2">
						<text class="text-primary" v-for="(tel, index) in find.tel" :key="index"
							@tap="$func.makePhoneCall(tel)">
							{{ tel }}
						</text>
					</view>
				</view>
				<view class="flex flex-column grid-gap-2">
					<text class="h9 text-placeholder">负责人</text>
					<text class="text-primary" @tap="$func.makePhoneCall(find.mobile)">
						{{ find.name }} · {{ find.mobile }}
					</text>
				</view>
			</view>

			<view v-show="navTbale === 'comment'" class="flex flex-column grid-gap-4">
				<template v-if="find.comments && find.comments.length > 0">
					<view class="bg-white rounded-4 p-4" v-for="(item, index) in find.comments" :key="index">
						<x-comment-item :item="item" />
					</view>
				</template>
				<view class="vh-30 flex flex-center" v-else>
					<x-empty type="log" text="暂无评论"></x-empty>
				</view>
				<text class="bg-white rounded-4 p-4 text-center h10 text-grey"
					v-if="find.comments && find.comments_count > find.comments.length"
					@tap="$page.open('/pages/comment/index?action=shop&id=' + find.id)">
					查看全部({{ find.comments_count }})条评论
				</text>
			</view>
		</view>

		<x-loading v-if="loading" />
		<x-login ref="xLoginRef" @success="getDetails(find.id)" />
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { $page, $api, $message, $func, login } from '@/utils';
import { onLoad, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { useWebConfigStore, useUserStore } from "@/stores";
const WebConfigStore = useWebConfigStore();
const UserStore = useUserStore();
const xLoginRef = ref();
const loading = ref(false);
const find = ref({});
const search = ref({
	shop_id: 0,
	limit: 10,
	page: 1
})
const navList = ref([
	{
		label: '技师',
		value: 'technician'
	},
	{
		label: '门店',
		value: 'content'
	},
	{
		label: '评价',
		value: 'comment'
	}
]);
const navTbale = ref('technician');
const technicianList = ref([]);
const changeNavTab = (val: string) => {
	navTbale.value = val;
	if (val === 'technician' && technicianList.value.length === 0) {
		nextTick(() => {
			getTechnicianList();
		});
	}
}
const getDetails = (id: any) => {
	if (loading.value) return;
	loading.value = true;
	$api.Shop.details(id).then((data: any) => {
		find.value = data;
		search.value.shop_id = data.id;
		$page.title(data.title);
		changeNavTab(navTbale.value);
	}).catch((res: any) => {
		uni.showModal({
			title: '提示',
			content: res.msg,
			showCancel: false,
			success: () => {
				$page.back();
			}
		});
	}).finally(() => {
		loading.value = false;
	});
}
const loadmore = ref('loadmore');
const getTechnicianList = () => {
	if (loadmore.value === 'loading' || loadmore.value === 'nomore') return;
	loadmore.value = 'loading';
	$api.Technician.list(search.value).then((data: any) => {
		loadmore.value = 'loadmore';
		const d = data.data.sort((a: any, b: any) => a.sort - b.sort);
		technicianList.value = [...technicianList.value, ...d];
		search.value.page++;
		nextTick(() => {
			if (data.current_page >= data.last_page) {
				loadmore.value = 'nomore';
			}
		});
	}).finally(() => {
		if (loadmore.value === 'loading') {
			loadmore.value = 'loadmore';
		}
	});
}
const collect = () => {
	if (!UserStore.hasLogin()) {
		return login({}, xLoginRef.value);
	}
	$api.Collect.shop(find.value.id).then((data: any) => {
		find.value.is_collect = data.state;
		if (data.state) {
			find.value.collect_num++;
		} else {
			find.value.collect_num--;
		}
	}).catch((err: any) => {
		$message.error(err.msg);
	})
}
const openLocation = () => {
	if (!find.value.longitude || !find.value.latitude) {
		return;
	}
	uni.openLocation({
		latitude: find.value.latitude,
		longitude: find.value.longitude,
		name: find.value.title,
		address: `${find.value.province}${find.value.city}${find.value.area}${find.value.street}${find.value.address}`
	});
}
onLoad((options: any) => {
	if (options.nav) {
		navTbale.value = options.nav;
	}
	getDetails(options.id);
})
onReachBottom(() => {
	if (navTbale.value !== 0) return;
	getTechnicianList();
})
onShareAppMessage(() => {
	return $page.shareMessage({
		title: find.value.title,
		path: `/pages/mch/details?id=${find.value.id}`
	})
})
onShareTimeline(() => {
	return $page.shareTimeline({
		title: find.value.title,
		path: `/pages/mch/details?id=${find.value.id}`
	})
})
</script>

<style lang="scss" scoped>
.screen-swiper {
	height: 750rpx;

	.swiper-image {
		width: 100%;
		height: 750rpx;
	}
}

.tab {
	height: 50px;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #FAFAFA;

	&-item {
		height: 50px;
		line-height: 50px;
		display: inline-flex;
		justify-content: center;
		align-items: center;

		.item-primary-active {
			padding: 0;
		}
	}
}
</style>
